<template>
  <div class='p-5'>
    <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAllCity" @change="handCheckAllCity">全省</el-checkbox>
    <el-checkbox-group v-model="checkedCities" @change="handCheckedCitiesChange">
      <div v-for="(val, key) in AllData[610000]" :key="val">
        <el-checkbox :label="key" v-model="checkAllArea" @change="handCheckAllArea(key, ...arguments)">{{val}}</el-checkbox>
        <el-checkbox-group v-model="checkedAreas" @change="handCheckedAreasChange(key, ...arguments)">
          <el-checkbox v-for="(val, key) in AllData[key]" :label="key" :key="key">{{val}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </el-checkbox-group> -->

    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAllCity" @change="handCheckAllCity">全省</el-checkbox>
    <el-divider></el-divider>
    <el-checkbox-group v-model="checkedCities" @change="handCheckedCitiesChange">
      <el-checkbox :indeterminate="isIndeterminate01" label="610100" v-model="checkAllArea01" @change="handCheckAllArea('610100', ...arguments)">西安市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas01" @change="handCheckedAreasChange('610100', ...arguments)">
        
        <el-checkbox v-for="(val, key) in AllData[610100]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate02" label="610200" v-model="checkAllArea02" @change="handCheckAllArea('610200', ...arguments)">铜川市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas02" @change="handCheckedAreasChange('610200', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[610200]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate03" label="610300" v-model="checkAllArea03" @change="handCheckAllArea('610300', ...arguments)">宝鸡市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas03" @change="handCheckedAreasChange('610300', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[610300]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate04" label="610400" v-model="checkAllArea04" @change="handCheckAllArea('610400', ...arguments)">咸阳市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas04" @change="handCheckedAreasChange('610400', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[610400]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate05" label="610500" v-model="checkAllArea05" @change="handCheckAllArea('610500', ...arguments)">渭南市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas05" @change="handCheckedAreasChange('610500', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[610500]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate06" label="610600" v-model="checkAllArea06" @change="handCheckAllArea('610600', ...arguments)">延安市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas06" @change="handCheckedAreasChange('610600', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[610600]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate07" label="610700" v-model="checkAllArea07" @change="handCheckAllArea('610700', ...arguments)">汉中市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas07" @change="handCheckedAreasChange('610700', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[610700]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate08" label="610800" v-model="checkAllArea08" @change="handCheckAllArea('610800', ...arguments)">榆林市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas08" @change="handCheckedAreasChange('610800', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[610800]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate09" label="610900" v-model="checkAllArea09" @change="handCheckAllArea('610900', ...arguments)">安康市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas09" @change="handCheckedAreasChange('610900', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[610900]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <el-checkbox :indeterminate="isIndeterminate10" label="611000" v-model="checkAllArea10" @change="handCheckAllArea('611000', ...arguments)">商洛市</el-checkbox>
      <el-checkbox-group v-model="checkedAreas10" @change="handCheckedAreasChange('611000', ...arguments)">
        <el-checkbox v-for="(val, key) in AllData[611000]" :label="key" :key="key">{{val}}</el-checkbox>
      </el-checkbox-group>

      <!-- <div v-for="(val, key) in AllData[610000]" :key="val">
        <el-checkbox :label="key" v-model="checkAllArea" @change="handCheckAllArea(key, ...arguments)">{{val}}</el-checkbox>
        <el-checkbox-group v-model="checkedAreas" @change="handCheckedAreasChange(key, ...arguments)">
          <el-checkbox v-for="(val, key) in AllData[key]" :label="key" :key="key">{{val}}</el-checkbox>
        </el-checkbox-group>
      </div> -->
    </el-checkbox-group>
    <!-- <el-button @click="getAllData()">获取选择的数据</el-button> -->
  </div>
</template>
<script>
// const cityOptions = ['上海', '北京', '广州', '深圳'];
import pca from '@/libs/pca-code'
export default {
  name: 'checkarea',
  title: '区域选择',
  // 610000: {
  //   610100: '西安市',
  //   610200: '铜川市',
  //   610300: '宝鸡市',
  //   610400: '咸阳市',
  //   610500: '渭南市',
  //   610600: '延安市',
  //   610700: '汉中市',
  //   610800: '榆林市',
  //   610900: '安康市',
  //   611000: '商洛市'
  // },
  data() {
    return {
      cities: ['610100', '610200', '610300', '610400', '610500', '610600', '610700', '610800', '610900', '611000'],
      AllData: pca,
      checkAllCity: false,
      isIndeterminate: false,
      checkedCities: [],
      checkAllArea01: false,
      isIndeterminate01: false,
      checkedAreas01: [],
      checkAllArea02: false,
      isIndeterminate02: false,
      checkedAreas02: [],
      checkAllArea03: false,
      isIndeterminate03: false,
      checkedAreas03: [],
      checkAllArea04: false,
      isIndeterminate04: false,
      checkedAreas04: [],
      checkAllArea05: false,
      isIndeterminate05: false,
      checkedAreas05: [],
      checkAllArea06: false,
      isIndeterminate06: false,
      checkedAreas06: [],
      checkAllArea07: false,
      isIndeterminate07: false,
      checkedAreas07: [],
      checkAllArea08: false,
      isIndeterminate08: false,
      checkedAreas08: [],
      checkAllArea09: false,
      isIndeterminate09: false,
      checkedAreas09: [],
      checkAllArea10: false,
      isIndeterminate10: false,
      checkedAreas10: []
    }
  },
  methods: {
    // 选择全省
    handCheckAllCity(val) {
      this.checkedCities = val ? Object.keys(this.AllData[610000]) : [];
      this.isIndeterminate = false;
      this.cities.forEach(item => {
        this.handCheckAllArea(item, val)
      });
    },
    // 选择某一个市
    handCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAllCity = checkedCount === Object.keys(this.AllData[610000]).length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < Object.keys(this.AllData[610000]).length;
    },

    // 选择全市
    handCheckAllArea(key, val) {
      this['checkedAreas' + key.toString().slice(2,4)] = val ? Object.keys(this.AllData[key]) : [];
      // this.checkedAreas = val ? Object.keys(this.AllData[key]) : [];
      this['isIndeterminate' + key.toString().slice(2,4)] = false;
    },

    // 选择某一个区
    handCheckedAreasChange(key, value) {
      let checkedCount = value.length;
      this['checkAllArea' + key.toString().slice(2,4)] = checkedCount === Object.keys(this.AllData[key]).length;
      // this.checkAllArea = checkedCount === Object.keys(this.AllData[key]).length;
      this['isIndeterminate' + key.toString().slice(2,4)] = checkedCount > 0 && checkedCount < Object.keys(this.AllData[key]).length;
      let index = this.checkedCities.findIndex(item => item === key)
      // 不在已选择中
      if (this['checkAllArea' + key.toString().slice(2,4)] && index < 0) {
        this.checkedCities.push(key)
        this.handCheckedCitiesChange(this.checkedCities)
      } else if (!this['checkAllArea' + key.toString().slice(2,4)] && index >= 0) {
        this.checkedCities.splice(index, 1)
        this.handCheckedCitiesChange(this.checkedCities)
      }
    },
    getCityName (key) {
      return this.AllData[key.slice(0,2) + '0000'][key]
    },
    getAreaName (key) {
      return this.AllData[key.slice(0,4) + '00'][key]
    },
    getAllData () {
      let areas = [
        ...this.checkedAreas01,
        ...this.checkedAreas02,
        ...this.checkedAreas03,
        ...this.checkedAreas04,
        ...this.checkedAreas05,
        ...this.checkedAreas06,
        ...this.checkedAreas07,
        ...this.checkedAreas08,
        ...this.checkedAreas09,
        ...this.checkedAreas10
      ]
      let citiesNames = this.checkedCities.map(key => this.getCityName(key))
      let areasNames = areas.map(key => this.getAreaName(key))
      let datas = [{
        codes: this.checkedCities,
        names: citiesNames
      },{
        codes: areas,
        names: areasNames
      }]
      // console.log('1111111', datas, JSON.stringify(datas));
      return datas
    },
    setData(cityes, areas) {
      this.clearDatas()
      this.checkedCities.push(...cityes)
      areas.forEach(key => {
        this.setAreas(key.toString())
      });
    },
    setAreas (key){
      this['checkedAreas' + key.slice(2,4)].push(key)
      this.handCheckedAreasChange(`${key.slice(0,4)}00`, this['checkedAreas' + key.slice(2,4)])
    },
    clearDatas () {
      this.checkAllCity= false
      this.isIndeterminate= false
      this.checkedCities= []
      this.checkAllArea01= false
      this.isIndeterminate01= false
      this.checkedAreas01= []
      this.checkAllArea02= false
      this.isIndeterminate02= false
      this.checkedAreas02= []
      this.checkAllArea03= false
      this.isIndeterminate03= false
      this.checkedAreas03= []
      this.checkAllArea04= false
      this.isIndeterminate04= false
      this.checkedAreas04= []
      this.checkAllArea05= false
      this.isIndeterminate05= false
      this.checkedAreas05= []
      this.checkAllArea06= false
      this.isIndeterminate06= false
      this.checkedAreas06= []
      this.checkAllArea07= false
      this.isIndeterminate07= false
      this.checkedAreas07= []
      this.checkAllArea08= false
      this.isIndeterminate08= false
      this.checkedAreas08= []
      this.checkAllArea09= false
      this.isIndeterminate09= false
      this.checkedAreas09= []
      this.checkAllArea10= false
      this.isIndeterminate10= false
      this.checkedAreas10= []
    }
  }
} 
</script>
<style lang='scss'>
</style>